<template>
    <el-drawer
    :title="this.$t('titles.volume')"
    :visible.sync="drawer"
    :close-on-press-escape="false"
    custom-class="volumeList"
    :wrapperClosable="closable"
    :show-close="showClose"
    :direction="direction"
    @close="closeDrawer">
        <div class="modulContent">
            <el-slider v-model="voice" :format-tooltip="formatTooltip"  @change="changeVoice"></el-slider>
        </div>
    </el-drawer>
</template>

<script>
import { showVolume, adjustVoice } from '../js/volume';
export default {
    name: 'volume',
    components:{
        
    },
    data(){
        return{
            drawer: this.$store.state.showVolume,
            direction: 'btt',
            closable: true,
            showClose: true,

            voice: 0
        }
    },
    methods:{
        formatTooltip(val) {
            return val *2;
        },

        changeVoice(val){
            adjustVoice(val*2)
        },

        //关闭模态框
        closeDrawer: function(){
            showVolume(false)
        }
    },

    //属性监听
    watch:{
       "$store.state.showVolume": function(val){
           this.drawer = val;
        }
    }

}
</script>

<style scoped lang="less">
 .modulContent{
     width: 100%;
     color: #666666;
     margin: 30px 0 ;
     padding: 0 15px 0 23px;
 }
</style>